<template>
	<div id="importFile">
		<div class="breadcrumb">
			<img src="../../../../static/img/appoinment_1.png" class="head_img">
			<span class="title" @click="cancel()">体测预约</span>/ 场次列表
			<el-button size="small" type="text" @click="toTestData" class="top_btn_1">体测数据</el-button>
			<el-button size="small" type="text" @click="toStandards" class="top_btn">体测标准</el-button>
		</div>
		<div id="test-detail">
			<span class="phy-setting" @click="dialogVisible = true">{{physicalName}}</span>
			<span class="testdes">测试教师：{{teacherNum}}人</span>
			<span class="testdes">测试场次：{{physicalTestNum}}场</span>
			<span class="testdes">已预约学生：{{totalOrdered}}人（男：{{orderedMale}}人，女：{{orderedFemale}}人）</span>
		</div>
		<div class="search">
			<el-select v-model="datetime">
				<el-option label="全部日期" value='-1'></el-option>
				<el-option v-for='item in dateList' :label="new Date(item).format('yyyy/MM/dd')" :value='item' :key="item">
				</el-option>
			</el-select>
			<el-select v-model="teacher">
				<el-option label="全部教师" value='-1'></el-option>
				<el-option v-for='item in teacherList' :label='item.teacherName' :value='item.mid' :key="item.mid">
				</el-option>
			</el-select>
			<el-select v-model="type">
				<el-option label="全部项目" value='-1'></el-option>
				<el-option v-for='item in testItem' :label='item.name' :value='item.id' :key="item.id"></el-option>
			</el-select>
			<el-select v-model="grade">
				<el-option label="全部年级" value='-1'></el-option>
				<el-option v-for='item in grades' :label='item.name' :value='item.value' :key="item.value"></el-option>
			</el-select>
			<el-select v-model="gender">
				<el-option label="所有性别" value='-1'></el-option>
				<el-option label="不限" value='2'></el-option>
				<el-option label="男" value='1'></el-option>
				<el-option label="女" value='0'></el-option>
			</el-select>
			<el-button class="sel_btn" type="primary" @click="getPhysicalList()">筛选</el-button>
		</div>
		<div class="list">
			<div class="list_head">
				<span class="head_name">场次列表</span>
				<el-button class="add" type="primary" @click="newProgect()">新增</el-button>
				<el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
			</div>
			<el-table :data="dataList" style="width:100%" :height="tableHeight">
				<el-table-column prop="teacherName" label="教师">
				</el-table-column>
				<el-table-column prop="testName" label="测试项目" min-width="120" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="grade" label="年级" width="100">
				</el-table-column>
				<el-table-column label="性别区分">
					<template scope="scope">
						<span v-if="scope.row.gender == 1">男生</span>
						<span v-if="scope.row.gender == 0">女生</span>
						<span v-if="scope.row.gender == 2">不限</span>
					</template>
				</el-table-column>
				<el-table-column label="测试日期" min-width="220">
					<template scope="scope">
						<span>{{scope.row.startTime}} -- {{scope.row.endTime}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="maxCount" label="最大预约人数">
				</el-table-column>
				<el-table-column prop="currCount" label="已预约">
				</el-table-column>
				<el-table-column width="200" align="right">
					<template scope="scope">
						<el-button size="small" type="text" @click="reservationData(scope.row)">预约数据</el-button>
						<el-button size="small" type="text" @click="addProgect(scope.row)" :disabled="scope.row.isDisabled">编辑</el-button>
						<el-button size="small" type="text" @click="delHistory(scope.row)" :disabled="scope.row.isDisabled">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="pageNum" :total="totalCount"
				 @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
		<el-dialog title="每组测试人数" :visible.sync="dialogVisible" width="30%">
			<p>身高体重： {{heightWeight}}人</p>
			<p>肺活量： {{vitalCapacity}}人</p>
			<p>立定跳远： {{standinglongjump}}人</p>
			<p>坐位体前屈： {{sitandreach}}人</p>
			<p>引体向上（男）： {{pullUp}}人</p>
			<p>一分钟仰卧起坐（女）： {{sitandup}}人</p>
			<p>50米跑： {{run50}}人</p>
			<p>800米跑（女）： {{run800}}人</p>
			<p>1000米跑（男）： {{run1000}}人</p>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				dialogVisible: false,
				dataList: [],
				grade: "",
				startTime: "",
				endTime: "",
				teacherName: "",
				gender: "-1",
				currCount: "",
				datetime: '-1',
				dateList: [],
				type: "-1",
				testItem: [
					{ name: "身高体重", id: "1" },
					{ name: "肺活量", id: "2" },
					{ name: "50米跑", id: "3" },
					{ name: "立定跳远", id: "4" },
					{ name: "坐位体前屈", id: "5" },
					{ name: "仰卧起坐", id: "6" },
					{ name: "引体向上", id: "7" },
					{ name: "1000米跑", id: "8" },
					{ name: "800米跑", id: "9" }
				],
				teacher: "-1",
				teacherList: [],
				grade: '-1',
				grades: [],
				tableHeight: 430,
				physicalTestId: "",
				physicalName: this.$util.getUrlParam('physicalName') || '',
				teacherNum: "12",
				orderedFemale: 10,
				orderedMale: 20,
				totalOrdered: 30,
				physicalTestNum: 56,
				totalCount: 0,
				pageSize: 10,
				pageNum: 1,
				heightWeight: 0,
				vitalCapacity: 0,
				standinglongjump: 0,
				sitandreach: 0,
				pullUp: 0,
				sitandup: 0,
				run50: 0,
				run800: 0,
				run1000: 0
			};
		},
		mounted() {
			this.physicalTestId = this.$util.getUrlParam("physicalTestId");
			this.getPhysicalList();
			this.tableHeight = (document.body.clientHeight - 300) || 460;
			this.getTestDetail();
			this.getTeacherList();
			this.getDateList();
			this.getGrades();
			this.getPhysicalSetting();
		},
		computed: mapState({ user: state => state.user }),
		methods: {

			getPhysicalSetting() {
				let url = this.$util.domain + "/physicaltest/physicaltestdetails";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						physicalTestId: this.physicalTestId * 1
					})
				}).then((response) => {
					if (response.data.error == 10000) {
						let dataObj = response.data.data;
						if (dataObj) {
							this.heightWeight = dataObj.heightWeight;
							this.vitalCapacity = dataObj.vitalCapacity;
							this.standinglongjump = dataObj.standinglongjump;
							this.sitandreach = dataObj.sitandreach;
							this.pullUp = dataObj.pullUp;
							this.sitandup = dataObj.sitandup;
							this.run50 = dataObj.run50;
							this.run800 = dataObj.run800;
							this.run1000 = dataObj.run1000;
						}
					}
				});


			},

			// 场次列表
			getPhysicalList() {
				let url = this.$util.domain + "/api/v24/physical/getFields";
				this.$http({
					url,
					method: "GET",
					params: {
						physicalId: this.physicalTestId * 1,
						mid: this.teacher * 1,
						type: this.type * 1,
						grade: this.grade * 1,
						gender: this.gender * 1,
						pageNum: this.pageNum * 1,
						pageSize: this.pageSize * 1,
						date: this.datetime * 1
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let dataList = response.data.data.list;
						this.totalCount = response.data.data.totalCount;
						this.dataList = [];
						if (dataList && dataList.length > 0) {
							for (let i = 0; i < dataList.length; i++) {
								let $class = dataList[i].grade.grade + "级",
									$startTime = dataList[i].startTime,
									$endTime = dataList[i].endTime,
									$teacherName = dataList[i].teacherName,
									$currCount = dataList[i].currCount,
									$testName = dataList[i].testNameType,
									$id = dataList[i].itemId,
									$maxCount = dataList[i].maxCount,
									$gender = dataList[i].gender;
								let $isDisabled;
								if ($currCount > 0) {
									$isDisabled = true;
								} else {
									$isDisabled = false;
								}

								this.dataList.push({
									id: $id,
									grade: $class,
									gender: $gender,
									testName: $testName,
									isDisabled: $isDisabled,
									maxCount: $maxCount + '人',
									currCount: $currCount + '人',
									teacherName: $teacherName,
									endTime: new Date($endTime).format("hh:mm"),
									startTime: new Date($startTime).format("yyyy/MM/dd hh:mm")
								});
							}
						}
					}
				});
			},

			// 获取场次统计信息
			getTestDetail() {
				let url = this.$util.domain + "/api/v24/physical/getPhysicalStatisticsInfo";

				this.$http({
					url,
					method: "GET",
					params: {
						physicalId: this.physicalTestId * 1
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let resobj = response.data.data
						this.orderedFemale = resobj.femaleCount;
						this.orderedMale = resobj.maleCount
						this.physicalTestNum = resobj.fieldCount
						this.teacherNum = resobj.teacherCount
						this.totalOrdered = resobj.femaleCount * 1 + resobj.maleCount * 1
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},

			// 获取预约日期列表
			getDateList() {
				let url = this.$util.domain + "/api/v24/physical/getDate";

				this.$http({
					url,
					method: "GET",
					params: {
						physicalId: this.physicalTestId * 1
					}
				}).then(response => {  // fivePoints.sort(this.$util.sortby("position"));
					if (response.data.error == 10000) {
						let dal = response.data.data || [];
						this.dateList = dal.sort(this.sortNumber);
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			sortNumber(a, b) {
				return b - a
			},

			// 获取场次教师列表
			getTeacherList() {
				let url = this.$util.domain + "/api/v24/physical/getTeacher";

				this.$http({
					url,
					method: "GET",
					params: {
						physicalId: this.physicalTestId * 1
					}
				}).then(response => {
					if (response.data.error == 10000) {
						this.teacherList = response.data.data || [];
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},

			// 获取年级列表
			getGrades() {
				let url = this.$util.domain + "/physicaltest/gradelist";

				this.$http({
					url,
					method: "POST",
				}).then(response => {
					if (response.data.error == 10000) {
						let gradeList = response.data.data;
						if (gradeList && gradeList.length > 0) {
							for (let i = 0; i < gradeList.length; i++) {
								this.grades.push({
									value: gradeList[i],
									name: gradeList[i] + "级"
								});
							}
						}
					}
				});
			},

			//删除
			delHistory(row) {
				this.$confirm("您确定要删除 " + row.teacherName + "教师 创建的 " + row.startTime + "-" + row.endTime + " 的 " + row.testName + " 体测场次？", "删除场次", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					let url = this.$util.domain + "/physicaltest/deletetestitem";

					this.$http({
						url,
						method: "POST",
						body: JSON.stringify({
							itemId: row.id
						})
					}).then(response => {
						if (response.data.error == 10000) {
							this.$util.successMsg("删除成功");
							this.getPhysicalList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				})

			},
			cancel() {
				location.href = "/#/history";
			},
			handleCurrentChange(val) {
				this.pageNum = val;
				this.getPhysicalList();
			},

			//预约数据
			reservationData(row) {
				let params = {
					itemId: row.id,
					testName: encodeURI(row.testName),
					physicalTestId: this.physicalTestId,
					physicalName: this.physicalName,
					gender: row.gender
				}
				this.$util.refreshTo("/#/reservationData", params);
			},

			//编辑项目
			addProgect(row) {
				location.href = `/#/newProgect?physicalTestId=${this.physicalTestId}&itemId=${row.id}&physicalName=${this.physicalName}`;
			},

			//新增项目
			newProgect() {
				location.href = `/#/newProgect?physicalTestId=${this.physicalTestId}&physicalName=${this.physicalName}`;
			},
			toStandards() {
				location.href = "/#/standards";
			},
			toTestData() {
				location.href = "/#/dataStatistics";
			}
		}
	}; 
</script>

<style>
	#importFile {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	#importFile .title {
		color: #0398ff;
	}

	#importFile .export {
		position: absolute;
		right: 140px;
		border-radius: 0;
	}

	#importFile .add {
		position: absolute;
		right: 70px;
	}

	#importFile #test-detail {
		margin: 0 30px 15px;
		padding: 15px 25px;
		background-color: #fff;
	}

	#importFile #test-detail .testdes {
		font-size: 14px;
		padding-left: 15px;
		color: #666;
	}

	#importFile .search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		line-height: 60px;
		padding: 0 25px;
	}

	#importFile .phy-setting {
		color: #0398ff;
		cursor: pointer;
	}
	#importFile .el-dialog__body{
		padding-left: 100px;
		line-height: 32px;
		font-size: 16px;
	}
</style>